// Copyright 2023 Huawei Cloud Computing Technology Co., Ltd.
//
// Licensed under the Apache License, Version 2.0 (the "License");
// you may not use this file except in compliance with the License.
// You may obtain a copy of the License at
//
//     http://www.apache.org/licenses/LICENSE-2.0
//
// Unless required by applicable law or agreed to in writing, software
// distributed under the License is distributed on an "AS IS" BASIS,
// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
// See the License for the specific language governing permissions and
// limitations under the License.

import PROTOCOL_CONFIG from './config/protocolConfig';
import {CLOUD_PHONE_RATIO, DEVICE_ORIENTATION_ANGLES} from './config/commonConfig';
import Util from './Util';

const normalCssText = `
    display: none;
    width: 300px;
    height: 200px;
    position: absolute;
    z-index: 999;
    top: 50%;
    left: 50%;
    background-color: #fff;
    border: 1px solid #dfe1e6;
    border-radius: 5px;
    transform: translate(-50%, -50%);
`;
const DOM_ORIENTATION_ANGLES = {
    'PORTRAIT': 0,
    'REVERSE_PORTRAIT': 180,
    'LANDSCAPE': -90,
    'REVERSE_LANDSCAPE': 90
};

class DirectionHandler {
    constructor(options) {
        this.options = {...options};
        this.util = new Util();
        this.orientation  = null;
        this.displayBox = null;
        this.touchHandler = this.options.touchHandler;

        this.containerEle = document.getElementById(this.options.containerId);
        if (!_EXTRA_UI_) {
          this.netWorkInfo = {
            clientHeight: 0,
            clientWidth: 0 
          };
          this.messageModal = {
            width: '0px',
            height: '0px'
          };
          this.buttonModal = {
            width: '0px',
            height: '0px'
          };
          this.ctrlEle = {
            clientHeight: 0,
            clientWidth: 0 
          };
        } else {
          this.netWorkInfo = document.getElementById('network-info');
          this.messageModal = document.getElementById('messageModal');
          this.exitModal = document.getElementById('exitModal');
          this.buttonModal = document.getElementById('buttonModal');
          this.ctrlEle = document.getElementById('controlBtn');
        }
        if (this.options.isMobile) {
          this.keyboardInputContent = {
             width: '0px',
             height: '0px'
          }
        } else {
          this.keyboardInputContent = document.getElementById('keyboardInputContent');
        }
    }

    init() {
        this.util.bind(window, 'orientationchange', this.patchChange.bind(this));
    }

    portraitPc() {
        switch (this.orientation) {
            case PROTOCOL_CONFIG.ORIENTATION[0]:
                let ctrlEleLeft = (this.containerEle.clientWidth - this.displayBox.width)/2 + this.ctrlEle.clientWidth/2;
                let ctrlEleTop = (this.containerEle.clientHeight - this.displayBox.height)/2 + this.netWorkInfo.clientHeight * 2.5;
                this.portraitAndportrait(ctrlEleLeft, ctrlEleTop);
                if (this.keyboardInputContent) {
                    this.keyboardInputContent.style.cssText = `
                    display:  ${this.currentDisplay ? this.currentDisplay : 'none'};
                    position: absolute;
                    bottom: 5px;
                    left: 0px;
                    height: 0px;
                    width: 10px;
                    `;
                }
                break;
            case PROTOCOL_CONFIG.ORIENTATION[16]:
                const keyboardInputLeft = this.containerEle.clientWidth;
                const keyboardInputTop = 0;
                this.portraitAndReversePortrait(keyboardInputLeft, keyboardInputTop, PROTOCOL_CONFIG.ORIENTATION[16]);
            break;
            case PROTOCOL_CONFIG.ORIENTATION[8]:
                this.portraitAndReverseLandscapePc(PROTOCOL_CONFIG.ORIENTATION[8]);
                break;
            case PROTOCOL_CONFIG.ORIENTATION[24]:
                this.portraitAndLandscapePc(PROTOCOL_CONFIG.ORIENTATION[24]);
            break;
            default:
                break;
        }
    }

    // 手机竖屏场景，根据流方向适配
    portraitMobile() {
        switch (this.orientation) {
            case PROTOCOL_CONFIG.ORIENTATION[0]:
                let ctrlEleLeft = this.ctrlEle.clientWidth/2;
                let ctrlEleTop = this.netWorkInfo.clientHeight * 2.5;
                this.portraitAndportrait(ctrlEleLeft, ctrlEleTop);
                break;
            case PROTOCOL_CONFIG.ORIENTATION[16]:
                const keyboardInputLeft = this.containerEle.clientWidth;
                const keyboardInputTop = this.containerEle.clientHeight/2 - this.keyboardInputContent.clientHeight;
                this.portraitAndReversePortrait(keyboardInputLeft, keyboardInputTop, PROTOCOL_CONFIG.ORIENTATION[16]);
            break;
            case PROTOCOL_CONFIG.ORIENTATION[8]:
                this.portraitAndReverseLandscapeMobile(PROTOCOL_CONFIG.ORIENTATION[8]);
                break;
            case PROTOCOL_CONFIG.ORIENTATION[24]:
                this.portraitAndLandscapeMobile(PROTOCOL_CONFIG.ORIENTATION[24]);
            break;
            default:
                break;
        }
    }

    setDomElementPosition(positionParams) {
        const transformCssText = `
            display: none;
            width: 300px;
            height: 200px;
            position: absolute;
            z-index: 999;
            top: ${positionParams.commonTop}px;
            left: ${positionParams.commonLeft}px;
            background-color: #fff;
            border: 1px solid #dfe1e6;
            border-radius: 5px;
            -webkit-transform: rotate(${positionParams.transformAngle}deg);
            -moz-transform: rotate(${positionParams.transformAngle}deg);
            -ms-transform: rotate(${positionParams.transformAngle}deg);
            -o-transform: rotate(${positionParams.transformAngle}deg);
            transform: rotate(${positionParams.transformAngle}deg);
            transform-origin: left top;
        `;

        if (this.keyboardInputContent && !this.options.isMobile) {
          this.keyboardInputContent.style.cssText = `
              display:  ${this.currentDisplay ? this.currentDisplay : 'none'};
              -webkit-transform: rotate(${positionParams.transformAngle}deg);
              -moz-transform: rotate(${positionParams.transformAngle}deg);
              -ms-transform: rotate(${positionParams.transformAngle}deg);
              -o-transform: rotate(${positionParams.transformAngle}deg);
              transform-origin: left;
              transform: rotate(${positionParams.transformAngle}deg);
              position: absolute;
              top: ${positionParams.keyboardInputTop}px;
              left: ${positionParams.keyboardInputLeft}px;
              height: 0px;
              width: 10px;
          `;            
        }
        if (!_EXTRA_UI_) {
          return
        }
        this.messageModal.style.cssText = transformCssText;
        this.exitModal.style.cssText = transformCssText;
        this.netWorkInfo.style.cssText = `
            transform-origin: left;
            -webkit-transform: rotate(${positionParams.transformAngle}deg);
            -moz-transform: rotate(${positionParams.transformAngle}deg);
            -ms-transform: rotate(${positionParams.transformAngle}deg);
            -o-transform: rotate(${positionParams.transformAngle}deg);
            transform: rotate(${positionParams.transformAngle}deg);
            pointer-events: none;
            position: absolute;
            left: ${positionParams.netWorkInfoLeft}px;
            top: ${positionParams.netWorkInfoTop}px;
            height: 40px;
            line-height: 40px;
            text-align: center;
            width: ${positionParams.netWorkInfoWidth}px;
            color: #3AC295;
        `;
        this.buttonModal.style.cssText = `
            -webkit-transform: rotate(${positionParams.transformAngle}deg);
            -moz-transform: rotate(${positionParams.transformAngle}deg);
            -ms-transform: rotate(${positionParams.transformAngle}deg);
            -o-transform: rotate(${positionParams.transformAngle}deg);
            transform-origin: left top;
            transform: rotate(${positionParams.transformAngle}deg);
            display: none;
            width: 255px;
            height: 175px;
            position: absolute;
            z-index: 999;
            top: ${positionParams.buttonModalTop}px;
            left: ${positionParams.buttonModalLeft}px;
            background-color: rgba(0, 0, 0, 0.4);
            border-radius: 5px;
        `;

        this.ctrlEle.style.top = `${positionParams.ctrlEleTop}px`;
        this.ctrlEle.style.left = `${positionParams.ctrlEleLeft}px`;
        this.ctrlEle.style.transform = `rotate(${positionParams.transformAngle}deg)`;
        this.ctrlEle.style.transformOrigin = 'top';
    }

    // 设备不旋转，流不旋转
    portraitAndportrait(ctrlEleLeft, ctrlEleTop) {
        if (!_EXTRA_UI_) {
          return
        }
        this.messageModal.style.cssText = normalCssText;
        this.exitModal.style.cssText = normalCssText;
        this.netWorkInfo.style.cssText = `
            pointer-events: none;
            position: absolute;
            top: 0px;
            height: 40px;
            line-height: 40px;
            text-align: center;
            width: 100%;
            color: #3AC295;
        `;
        this.buttonModal.style.cssText = `
            display: none;
            width: 255px;
            height: 175px;
            position: absolute;
            z-index: 999;
            top: 50%;
            left: 50%;
            background-color: rgba(0, 0, 0, 0.4);
            border-radius: 5px;
            transform: translate(-50%, -50%);
        `;

        this.ctrlEle.style.top = `${ctrlEleTop}px`;
        this.ctrlEle.style.left = `${ctrlEleLeft}px`;
        this.ctrlEle.style.transform = 'none';
    }

    // 设备不旋转，流旋转180
    portraitAndReversePortrait(keyboardInputLeft, keyboardInputTop, orientationStr) {
        const transformAngle = DOM_ORIENTATION_ANGLES[orientationStr];
        const netWorkInfoLeft = (this.containerEle.clientWidth -  this.netWorkInfo.clientWidth)/2 + this.netWorkInfo.clientWidth;
        const netWorkInfoTop = this.containerEle.clientHeight - this.netWorkInfo.clientHeight;
        let commonLeft, commonTop, buttonModalLeft, buttonModalTop;
        if (!_EXTRA_UI_) {
          commonLeft = (this.containerEle.clientWidth - this.displayBox.width)/2 + Number(this.messageModal.width.split('px')[0]) + (this.displayBox.width - Number(this.messageModal.width.split('px')[0]))/2;
          commonTop =this.containerEle.clientHeight/2 + Number(this.messageModal.height.split('px')[0])/2;
          buttonModalLeft = (this.containerEle.clientWidth - this.displayBox.width)/2 + Number((this.buttonModal).width.split('px')[0]) + (this.displayBox.width - Number((this.buttonModal).width.split('px')[0]))/2;
          buttonModalTop = this.containerEle.clientHeight/2 + Number(this.messageModal.height.split('px')[0])/2;
        } else {
          commonLeft = (this.containerEle.clientWidth - this.displayBox.width)/2 + Number(window.getComputedStyle(this.messageModal).width.split('px')[0]) + (this.displayBox.width - Number(window.getComputedStyle(this.messageModal).width.split('px')[0]))/2;
          commonTop =this.containerEle.clientHeight/2 + Number(window.getComputedStyle(this.messageModal).height.split('px')[0])/2;
          buttonModalLeft = (this.containerEle.clientWidth - this.displayBox.width)/2 + Number(window.getComputedStyle(this.buttonModal).width.split('px')[0]) + (this.displayBox.width - Number(window.getComputedStyle(this.buttonModal).width.split('px')[0]))/2;
          buttonModalTop = this.containerEle.clientHeight/2 + Number(window.getComputedStyle(this.messageModal).height.split('px')[0])/2;

        }

        const ctrlEleTop = this.containerEle.clientHeight - this.netWorkInfo.clientHeight * 2.5;
        const ctrlEleLeft = (this.containerEle.clientWidth - this.displayBox.width)/2 + this.displayBox.width - this.ctrlEle.clientWidth * 1.5;
        const netWorkInfoWidth = this.containerEle.clientWidth;
        const keyboardInputWidth = this.containerEle.clientWidth;

        const positionParams = {
            transformAngle,
            netWorkInfoLeft,
            netWorkInfoTop,
            commonLeft,
            commonTop,
            buttonModalLeft,
            buttonModalTop,
            ctrlEleTop,
            ctrlEleLeft,
            netWorkInfoWidth,
            keyboardInputLeft,
            keyboardInputTop,
            keyboardInputWidth
        };

        this.setDomElementPosition(positionParams);
    }

    // 设备不旋转，流旋转-90
    portraitAndReverseLandscapePc(orientationStr) {
        const transformAngle = DOM_ORIENTATION_ANGLES[orientationStr];
        const netWorkInfoLeft = this.containerEle.clientWidth - this.netWorkInfo.clientHeight;
        const netWorkInfoTop = -this.netWorkInfo.clientHeight/2;
        let commonLeft, commonTop, buttonModalLeft, buttonModalTop;
        if (!_EXTRA_UI_) {
          commonLeft = this.containerEle.clientWidth - Number(this.messageModal.height.split('px')[0]);
          commonTop = (this.containerEle.clientHeight - Number(this.messageModal.width.split('px')[0]))/2;
          buttonModalLeft = this.containerEle.clientWidth - Number((this.buttonModal).height.split('px')[0]);
          buttonModalTop = (this.containerEle.clientHeight - Number((this.buttonModal).width.split('px')[0]))/2;
        } else {
          commonLeft = this.containerEle.clientWidth - Number(window.getComputedStyle(this.messageModal).height.split('px')[0]);
          commonTop = (this.containerEle.clientHeight - Number(window.getComputedStyle(this.messageModal).width.split('px')[0]))/2;
          buttonModalLeft = this.containerEle.clientWidth - Number(window.getComputedStyle(this.buttonModal).height.split('px')[0]);
          buttonModalTop = (this.containerEle.clientHeight - Number(window.getComputedStyle(this.buttonModal).width.split('px')[0]))/2;
        }

        const ctrlEleTop = (this.containerEle.clientHeight - this.displayBox.width)/2 + this.netWorkInfo.clientHeight;
        const ctrlEleLeft = this.containerEle.clientWidth - this.ctrlEle.clientHeight * 2.5;
        const netWorkInfoWidth = this.containerEle.clientHeight;
        let keyboardInputLeft;
        let keyboardInputTop;
        if(this.keyboardInputContent) {
            keyboardInputLeft = Number(window.getComputedStyle(this.keyboardInputContent).height.split('px')[0])/2;
            keyboardInputTop = -Number(window.getComputedStyle(this.keyboardInputContent).height.split('px')[0])/2;
        } else {
            keyboardInputLeft = 0;
            keyboardInputTop = 0;
        }
        const keyboardInputWidth = this.containerEle.clientHeight;
        const positionParams = {
            transformAngle,
            netWorkInfoLeft,
            netWorkInfoTop,
            commonLeft,
            commonTop,
            buttonModalLeft,
            buttonModalTop,
            ctrlEleTop,
            ctrlEleLeft,
            netWorkInfoWidth,
            keyboardInputLeft,
            keyboardInputTop,
            keyboardInputWidth
        };

        this.setDomElementPosition(positionParams);
    }

    // 设备不旋转，流旋转-90
    portraitAndReverseLandscapeMobile(orientationStr) {
        const transformAngle = DOM_ORIENTATION_ANGLES[orientationStr];
        const windowHeight = document.documentElement.clientHeight;
        const netWorkInfoLeft = (windowHeight - this.containerEle.clientWidth)/2 + this.containerEle.clientWidth - this.netWorkInfo.clientHeight;
        const netWorkInfoTop = -this.netWorkInfo.clientHeight/2;
        const commonLeft = this.containerEle.clientWidth;
        let commonTop, buttonModalTop;
        if (!_EXTRA_UI_) {
          commonTop = (this.containerEle.clientHeight - Number(this.messageModal.width.split('px')[0]))/2;
          buttonModalTop = (this.containerEle.clientHeight - Number((this.buttonModal).width.split('px')[0]))/2;
        } else {
          commonTop = (this.containerEle.clientHeight - Number(window.getComputedStyle(this.messageModal).width.split('px')[0]))/2;
          buttonModalTop = (this.containerEle.clientHeight - Number(window.getComputedStyle(this.buttonModal).width.split('px')[0]))/2;
        }
        const buttonModalLeft = this.containerEle.clientWidth;
        const ctrlEleTop = this.ctrlEle.clientHeight;
        const ctrlEleLeft = (windowHeight - this.containerEle.clientWidth)/2 + this.containerEle.clientWidth - this.netWorkInfo.clientHeight * 3.5;
        const netWorkInfoWidth = this.containerEle.clientHeight;
        let keyboardInputLeft = 0;
        let keyboardInputTop = 0;
        const keyboardInputWidth = this.containerEle.clientHeight;
        const positionParams = {
            transformAngle,
            netWorkInfoLeft,
            netWorkInfoTop,
            commonLeft,
            commonTop,
            buttonModalLeft,
            buttonModalTop,
            ctrlEleTop,
            ctrlEleLeft,
            netWorkInfoWidth,
            keyboardInputLeft,
            keyboardInputTop,
            keyboardInputWidth
        };

        this.setDomElementPosition(positionParams);
    }

    // 设备不旋转，流旋转90
    portraitAndLandscapePc(orientationStr) {
        const transformAngle = DOM_ORIENTATION_ANGLES[orientationStr];
        const netWorkInfoLeft = this.netWorkInfo.clientHeight;
        const netWorkInfoTop = this.containerEle.clientHeight - this.netWorkInfo.clientHeight/2;
        let commonLeft, commonTop, buttonModalTop, buttonModalLeft;
        if (!_EXTRA_UI_) {
          commonLeft = (this.displayBox.height - Number(this.messageModal.height.split('px')[0]))/2;
          commonTop = `${(this.containerEle.clientHeight - Number(this.messageModal.width.split('px')[0]))/2 + Number(this.messageModal.width.split('px')[0])}`;
          buttonModalTop = `${(this.containerEle.clientHeight - Number((this.buttonModal).width.split('px')[0]))/2 +  Number((this.buttonModal).width.split('px')[0])}`;
          buttonModalLeft = (this.displayBox.height - Number((this.buttonModal).height.split('px')[0]))/2;
        } else {
          commonLeft = (this.displayBox.height - Number(window.getComputedStyle(this.messageModal).height.split('px')[0]))/2;
          commonTop = `${(this.containerEle.clientHeight - Number(window.getComputedStyle(this.messageModal).width.split('px')[0]))/2 + Number(window.getComputedStyle(this.messageModal).width.split('px')[0])}`;
          buttonModalTop = `${(this.containerEle.clientHeight - Number(window.getComputedStyle(this.buttonModal).width.split('px')[0]))/2 +  Number(window.getComputedStyle(this.buttonModal).width.split('px')[0])}`;
          buttonModalLeft = (this.displayBox.height - Number(window.getComputedStyle(this.buttonModal).height.split('px')[0]))/2;
        }

        const ctrlEleTop = (this.containerEle.clientHeight - this.displayBox.width)/2 + this.displayBox.width - this.ctrlEle.clientHeight;
        const ctrlEleLeft = this.netWorkInfo.clientHeight * 1.5;
        const netWorkInfoWidth = this.containerEle.clientHeight;
        const keyboardInputLeft = this.containerEle.clientWidth - Number(window.getComputedStyle(this.keyboardInputContent).height.split('px')[0])/2;
        const keyboardInputTop = this.containerEle.clientHeight - Number(window.getComputedStyle(this.keyboardInputContent).height.split('px')[0])/2;
        const keyboardInputWidth = this.containerEle.clientHeight;
        const positionParams = {
            transformAngle,
            netWorkInfoLeft,
            netWorkInfoTop,
            commonLeft,
            commonTop,
            buttonModalLeft,
            buttonModalTop,
            ctrlEleTop,
            ctrlEleLeft,
            netWorkInfoWidth,
            keyboardInputLeft,
            keyboardInputTop,
            keyboardInputWidth
        };

        this.setDomElementPosition(positionParams);
    }

    // 设备不旋转，流旋转90
    portraitAndLandscapeMobile(orientationStr) {
        const transformAngle = DOM_ORIENTATION_ANGLES[orientationStr];
        const windowHeight = document.documentElement.clientHeight;
        const netWorkInfoLeft = -((windowHeight - this.containerEle.clientWidth)/2 - this.netWorkInfo.clientHeight/2);
        const netWorkInfoTop = this.containerEle.clientHeight - this.netWorkInfo.clientHeight/2;
        let commonTop, buttonModalTop;
        if (!_EXTRA_UI_) {
          buttonModalTop = `${(this.containerEle.clientHeight - Number((this.buttonModal).width.split('px')[0]))/2 +  Number((this.buttonModal).width.split('px')[0])}`;
          commonTop = `${(this.containerEle.clientHeight - Number(this.messageModal.width.split('px')[0]))/2 + Number(this.messageModal.width.split('px')[0])}`;
        } else {
          buttonModalTop = `${(this.containerEle.clientHeight - Number(window.getComputedStyle(this.buttonModal).width.split('px')[0]))/2 +  Number(window.getComputedStyle(this.buttonModal).width.split('px')[0])}`;
          commonTop = `${(this.containerEle.clientHeight - Number(window.getComputedStyle(this.messageModal).width.split('px')[0]))/2 + Number(window.getComputedStyle(this.messageModal).width.split('px')[0])}`;
        }
        const buttonModalLeft = 0;
        const commonLeft = 0;
        const ctrlEleTop = this.containerEle.clientHeight - this.ctrlEle.clientHeight;
        const ctrlEleLeft =-((windowHeight - this.containerEle.clientWidth)/2 - this.netWorkInfo.clientHeight * 2);
        const netWorkInfoWidth = this.containerEle.clientHeight;
        const keyboardInputLeft = this.containerEle.clientWidth/2 - this.keyboardInputContent.clientHeight;
        const keyboardInputTop = this.containerEle.clientHeight - Number(window.getComputedStyle(this.keyboardInputContent).height.split('px')[0])/2;
        const keyboardInputWidth = this.containerEle.clientHeight;
        const positionParams = {
            transformAngle,
            netWorkInfoLeft,
            netWorkInfoTop,
            commonLeft,
            commonTop,
            buttonModalLeft,
            buttonModalTop,
            ctrlEleTop,
            ctrlEleLeft,
            netWorkInfoWidth,
            keyboardInputLeft,
            keyboardInputTop,
            keyboardInputWidth
        };

        this.setDomElementPosition(positionParams);
    }

    // 手机横屏场景，根据流方向适配
    landscapeMobile() {
        switch (this.orientation) {
            case PROTOCOL_CONFIG.ORIENTATION[0]:
                this.landscapeAndPortrait();
                break;
            case PROTOCOL_CONFIG.ORIENTATION[8]:
                this.landscapeAndReserveLandscape(PROTOCOL_CONFIG.ORIENTATION[8]);
                break;
            case PROTOCOL_CONFIG.ORIENTATION[24]:
                this.landscapeAndLandscape(PROTOCOL_CONFIG.ORIENTATION[24]);
                break;
            default:
                break;
        }
    }

    // 设备横屏，流旋转0
    landscapeAndPortrait() {
        const clientWidth = document.documentElement.clientWidth;
        if (!_EXTRA_UI_) {
          return
        }
        this.messageModal.style.cssText = normalCssText;
        this.exitModal.style.cssText = normalCssText;
        this.netWorkInfo.style.cssText = `
            pointer-events: none;
            position: absolute;
            top: 0px;
            left: ${-(document.documentElement.clientWidth - this.containerEle.clientWidth)/2}px;
            height: 40px;
            line-height: 40px;
            text-align: center;
            width: ${document.documentElement.clientWidth}px;
            color: #3AC295;
        `;
        this.buttonModal.style.cssText = `
            display: none;
            width: 255px;
            height: 175px;
            position: absolute;
            z-index: 999;
            top: 50%;
            left: 50%;
            background-color: rgba(0, 0, 0, 0.4);
            border-radius: 5px;
            transform: translate(-50%, -50%);
        `;
        if (this.keyboardInputContent && !this.options.isMobile) { 
          this.keyboardInputContent.style.cssText = `
          display:  ${this.currentDisplay ? this.currentDisplay : 'none'};
          position: absolute;
          top: 0px;
          left: ${-(clientWidth - this.containerEle.clientWidth)/2}px;
          height: 40px;
          width: ${clientWidth}px;
          `;
        }
        const left = this.ctrlEle.clientWidth/2;
        const top = this.netWorkInfo.clientHeight * 2.5;
        this.ctrlEle.style.top = `${top}px`;
        this.ctrlEle.style.left = `${left}px`;
        this.ctrlEle.style.transform = 'none';
    }

    // 设备横屏，流旋转-90
    landscapeAndReserveLandscape(orientationStr) {
        const transformAngle = DOM_ORIENTATION_ANGLES[orientationStr];
        const windowWidth = document.documentElement.clientWidth;
        const windowHeight = document.documentElement.clientHeight;
        const netWorkInfoLeft = (windowHeight - this.containerEle.clientWidth)/2 + this.containerEle.clientWidth - this.netWorkInfo.clientHeight/2;
        const netWorkInfoTop = -this.netWorkInfo.clientHeight/2;
        const ctrlEleTop = this.ctrlEle.clientHeight;
        const ctrlEleLeft = (windowHeight - this.containerEle.clientWidth)/2 + this.containerEle.clientWidth - this.netWorkInfo.clientHeight * 2.5;
        let commonLeft, commonTop, buttonModalTop, buttonModalLeft, keyboardInputLeft, keyboardInputTop;
        if (!_EXTRA_UI_) {
          commonLeft = (this.containerEle.clientWidth - Number(this.messageModal.height.split('px')[0]))/2 + Number(this.messageModal.height.split('px')[0]);
          commonTop = (this.containerEle.clientHeight - Number(this.messageModal.width.split('px')[0]))/2;
          buttonModalTop = (this.containerEle.clientHeight - Number((this.buttonModal).width.split('px')[0]))/2;
          buttonModalLeft = (this.containerEle.clientWidth - Number((this.buttonModal).height.split('px')[0]))/2 + Number((this.buttonModal).height.split('px')[0]);
          keyboardInputLeft = (windowHeight - this.containerEle.clientWidth)/2 + this.containerEle.clientWidth - Number(this.keyboardInputContent.height.split('px')[0]/2);
          keyboardInputTop = -Number(this.keyboardInputContent.height.split('px')[0])/2;
        } else {
          commonLeft = (this.containerEle.clientWidth - Number(window.getComputedStyle(this.messageModal).height.split('px')[0]))/2 + Number(window.getComputedStyle(this.messageModal).height.split('px')[0]);
          commonTop = (this.containerEle.clientHeight - Number(window.getComputedStyle(this.messageModal).width.split('px')[0]))/2;
          buttonModalTop = (this.containerEle.clientHeight - Number(window.getComputedStyle(this.buttonModal).width.split('px')[0]))/2;
          buttonModalLeft = (this.containerEle.clientWidth - Number(window.getComputedStyle(this.buttonModal).height.split('px')[0]))/2 + Number(window.getComputedStyle(this.buttonModal).height.split('px')[0]);
          keyboardInputLeft = (windowHeight - this.containerEle.clientWidth)/2 + this.containerEle.clientWidth - Number(this.keyboardInputContent.height.split('px')[0]/2);
          keyboardInputTop = -Number(this.keyboardInputContent.height.split('px')[0])/2;
        }
       
        const netWorkInfoWidth = this.containerEle.clientHeight;
        const keyboardInputWidth = windowWidth;

        const positionParams = {
            transformAngle,
            netWorkInfoLeft,
            netWorkInfoTop,
            commonLeft,
            commonTop,
            buttonModalLeft,
            buttonModalTop,
            ctrlEleTop,
            ctrlEleLeft,
            netWorkInfoWidth,
            keyboardInputLeft,
            keyboardInputTop,
            keyboardInputWidth
        };

        this.setDomElementPosition(positionParams);
    }

    // 设备横屏，流旋转90
    landscapeAndLandscape(orientationStr) {
        const transformAngle = DOM_ORIENTATION_ANGLES[orientationStr];
        const windowWidth = document.documentElement.clientWidth;
        const windowHeight = document.documentElement.clientHeight;
        const netWorkInfoLeft = -((windowHeight - this.containerEle.clientWidth)/2 - this.netWorkInfo.clientHeight/2);
        const netWorkInfoTop = this.containerEle.clientHeight - this.netWorkInfo.clientHeight/2;
        const ctrlEleTop = this.containerEle.clientHeight - this.ctrlEle.clientHeight;
        const ctrlEleLeft =-((windowHeight - this.containerEle.clientWidth)/2 - this.ctrlEle.clientWidth);
        let commonLeft, commonTop, buttonModalTop, buttonModalLeft, keyboardInputLeft, keyboardInputTop;
        if (!_EXTRA_UI_) { 
          commonLeft = (this.containerEle.clientWidth - Number(this.messageModal.height.split('px')[0]))/2;
          commonTop = (this.containerEle.clientHeight - Number(this.messageModal.width.split('px')[0]))/2 + Number(this.messageModal.width.split('px')[0]);
          buttonModalTop = (this.containerEle.clientHeight - Number((this.buttonModal).width.split('px')[0]))/2 +  Number((this.buttonModal).width.split('px')[0]);
          buttonModalLeft = (this.containerEle.clientWidth - Number((this.buttonModal).height.split('px')[0]))/2;
          keyboardInputLeft = Number(this.keyboardInputContent.height.split('px')[0])/2;
          keyboardInputTop = windowWidth - Number(this.keyboardInputContent.height.split('px')[0])/2;
        } else {
          commonLeft = (this.containerEle.clientWidth - Number(window.getComputedStyle(this.messageModal).height.split('px')[0]))/2;
          commonTop = (this.containerEle.clientHeight - Number(window.getComputedStyle(this.messageModal).width.split('px')[0]))/2 + Number(window.getComputedStyle(this.messageModal).width.split('px')[0]);
          buttonModalTop = (this.containerEle.clientHeight - Number(window.getComputedStyle(this.buttonModal).width.split('px')[0]))/2 +  Number(window.getComputedStyle(this.buttonModal).width.split('px')[0]);
          buttonModalLeft = (this.containerEle.clientWidth - Number(window.getComputedStyle(this.buttonModal).height.split('px')[0]))/2;
          keyboardInputLeft = Number(this.keyboardInputContent.height.split('px')[0])/2;
          keyboardInputTop = windowWidth - Number(this.keyboardInputContent.height.split('px')[0])/2;
       }
        const netWorkInfoWidth = this.containerEle.clientHeight;
        const keyboardInputWidth = windowWidth;

        const positionParams = {
            transformAngle,
            netWorkInfoLeft,
            netWorkInfoTop,
            commonLeft,
            commonTop,
            buttonModalLeft,
            buttonModalTop,
            ctrlEleTop,
            ctrlEleLeft,
            netWorkInfoWidth,
            keyboardInputLeft,
            keyboardInputTop,
            keyboardInputWidth
        };

        this.setDomElementPosition(positionParams);
    }

    update(orientation, displayBox, currentDisplay) {
        this.orientation = orientation;
        this.displayBox = displayBox;
        this.currentDisplay = currentDisplay;
        this.change();
    }

    change() {
        if (!this.orientation || !this.displayBox) {
            return;
        }

        // 旋转前需要先取消旋转，避免叠加旋转
        this.cancelTransform();
        if (this.options.isMobile) {
            const deviceOrientation = window?.screen?.orientation?.angle || window.orientation;
            if ([DEVICE_ORIENTATION_ANGLES.PORTRAIT,DEVICE_ORIENTATION_ANGLES.REVERSE_PORTRAIT].includes(deviceOrientation)) {
                this.portraitMobile();
            } else if ([DEVICE_ORIENTATION_ANGLES.LANDSCAPE, DEVICE_ORIENTATION_ANGLES.REVERSE_LANDSCAPE].includes(deviceOrientation)) {
                this.landscapeMobile();
            }
        } else {
            this.portraitPc();
        }
        
    }

    patchChange() {
        this.displayBox = this.touchHandler.displayBox;
        setTimeout(() => {
            this.change();
            // 更新mobile时canvas画面
            this.changeMobileCanvas();
        }, 100);
    }

    cancelTransform() {
        if (this.keyboardInputContent && !this.options.isMobile) {
          this.keyboardInputContent.style.cssText = `
          display: none;
          position: absolute;
          bottom: 5px;
          left: 0px;
          height: 40px;
          width: 100%;
          `;
        }

        if (!_EXTRA_UI_) {
          return;
        }
        this.messageModal.style.cssText = normalCssText;
        this.exitModal.style.cssText = normalCssText;
        this.netWorkInfo.style.cssText = `
            pointer-events: none;
            position: absolute;
            top: 0px;
            height: 40px;
            line-height: 40px;
            text-align: center;
            width: 100%;
            color: #3AC295;
        `;
        this.buttonModal.style.cssText = `
            display: none;
            width: 255px;
            height: 175px;
            position: absolute;
            z-index: 999;
            top: 50%;
            left: 50%;
            background-color: rgba(0, 0, 0, 0.4);
            border-radius: 5px;
            transform: translate(-50%, -50%);
        `;
       

        const left = (this.containerEle.clientWidth - this.displayBox.width)/2 + this.ctrlEle.clientWidth/2;
        const top = (this.containerEle.clientHeight - this.displayBox.height)/2 + this.netWorkInfo.clientHeight * 2.5;
        this.ctrlEle.style.top = `${top}px`;
        this.ctrlEle.style.left = `${left}px`;
        this.ctrlEle.style.transform = 'none';
    }

    updateCanvasSize(orientation, isMSE) {
        if (isMSE || this.options.isMobile) {
            return;
        }

        // PC上canvas大小需要调整
        const containerEle = document.getElementById(this.options.containerId);
        const playContainerEle = document.getElementById(`${this.options.playerContainerId}`);
        playContainerEle.style.display = 'inline-block';
        let canvasElement = playContainerEle.shadowRoot.querySelector('#playCanvas');
        let playerHeight = null;
        let playerWidth = null;
        let innerHeight = window.innerHeight;

        if (orientation === PROTOCOL_CONFIG.ORIENTATION[0]) {
            // 竖屏
            playerHeight = containerEle && containerEle.clientHeight;
            if (playerHeight > innerHeight * 0.8) {
                playerHeight = containerEle && containerEle.clientWidth;
            }
            playerWidth = playerHeight * CLOUD_PHONE_RATIO;
            canvasElement.style.margin = '0 auto';
        } else {
            // 如果画面已经显示正常，就不执行
            const currentTop = parseInt(window.getComputedStyle(canvasElement).marginTop);
            if( currentTop > 0) {
                return;
            }
            // 横屏
            playerWidth = containerEle && containerEle.clientHeight;
            playerHeight = playerWidth / CLOUD_PHONE_RATIO;
        }
        const playContainer = document.querySelector('article');
        canvasElement.style.height = playContainer.style.height;
        canvasElement.width = this.options.mediaConfig?.width || 720;
        canvasElement.height = this.options.mediaConfig?.height || 1280;
    }

    updateMobileCanvasSize(orientation, isMSE) {
        this.orientation = orientation;
        this.isMSE = isMSE;

        this.changeMobileCanvas();
    }

    changeMobileCanvas() {
        if (!this.orientation || this.isMSE) {
            return;
        }
        
        const playContainerEle = document.getElementById(`${this.options.playerContainerId}`);
        playContainerEle.style.display = 'inline-block';
        let canvasElement = playContainerEle.shadowRoot.querySelector('#playCanvas');
        let playerHeight = null;
        let playerWidth = null;

        setTimeout(() => {
            let width = document.documentElement.clientWidth;
            let height = document.documentElement.clientHeight;
            const deviceOrientation = window?.screen?.orientation?.angle || window.orientation;
            if ([DEVICE_ORIENTATION_ANGLES.PORTRAIT,DEVICE_ORIENTATION_ANGLES.REVERSE_PORTRAIT].includes(deviceOrientation)) {
                if ([PROTOCOL_CONFIG.ORIENTATION[0], PROTOCOL_CONFIG.ORIENTATION[16]].includes(this.orientation)) {
                    if (this.options.keepRatio) {
                      playerWidth = width;
                      playerHeight = width / CLOUD_PHONE_RATIO;
                      if(playerHeight > height) {
                        playerWidth = height * CLOUD_PHONE_RATIO;
                        playerHeight = height;
                      }
                    } else {
                      playerWidth = width;
                      playerHeight = height;
                    }
                } else if ([PROTOCOL_CONFIG.ORIENTATION[8], PROTOCOL_CONFIG.ORIENTATION[24]].includes(this.orientation)) {
                  playerWidth = width * CLOUD_PHONE_RATIO;
                  playerHeight = width;
                }
            } else if([DEVICE_ORIENTATION_ANGLES.LANDSCAPE, DEVICE_ORIENTATION_ANGLES.REVERSE_LANDSCAPE].includes(deviceOrientation)) {
                if ([PROTOCOL_CONFIG.ORIENTATION[0], PROTOCOL_CONFIG.ORIENTATION[16]].includes(this.orientation)) {
                    playerHeight = height;
                    playerWidth = height * CLOUD_PHONE_RATIO;
                } else if ([PROTOCOL_CONFIG.ORIENTATION[8], PROTOCOL_CONFIG.ORIENTATION[24]].includes(this.orientation)) {
                  console.log(4)
                    if (this.options.keepRatio) {
                      playerHeight = width;
                      playerWidth = width * CLOUD_PHONE_RATIO;
                    } else {
                      playerHeight = width;
                      playerWidth = height;
                    }
                }
            }
            canvasElement.style.width = playerWidth + 'px';
            canvasElement.style.height = playerHeight + 'px';
            canvasElement.width = this.options.mediaConfig?.width || 720;
            canvasElement.height = this.options.mediaConfig?.height || 1280;
        }, 200);
    }
}

export default DirectionHandler;